<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
</head>
<body class="container">
<div class="header">
    <h1 style=" margin-left: 100px">修改密码</h1>
</div>
<div style="margin-top: 50px">
    <form class="form-horizontal"   th:action="@{/pe/peUserManage/editPassword}" method="post">
        <input type="hidden" name="id"/>
        <div class="form-group">
            <label for="opassword" class="col-sm-2 control-label font">旧密码</label>
            <div class="col-sm-5">
                <input type="password" class="form-control" name="opassword"  id="opassword" onkeyup="f()"/>
            </div>
            <div class="col-sm-5" style="margin-top: 10px;margin-left: -5px">
                <p id="ts1"></p>
            </div>
        </div>
        <div class="form-group">
            <label for="npassword" class="col-sm-2 control-label font">新密码</label>
            <div class="col-sm-5">
                <input type="password" class="form-control" name="npassword"  id="npassword" onkeyup="pw()"/>
            </div>
            <div class="col-sm-5" style="margin-top: 10px;margin-left: -5px">
                <p id="ts3"></p>
            </div>
        </div>
        <div class="form-group">
            <label for="qrpassword" class="col-sm-2 control-label font" >确认密码</label>
            <div class="col-sm-5">
                <input type="password" class="form-control" name="qrpassword"  id="qrpassword" onkeyup="validate()"/>
            </div>
            <div class="col-sm-5" style="margin-top: 10px;margin-left: -5px">
                <p id="ts2"></p>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" value="Submit" class="btn btn-info" id="btn"/>
                &nbsp; &nbsp; &nbsp;
                <a  onclick="javascript:window.history.go(-1)" class="btn btn-info">返回</a>
            </div>
        </div>
    </form>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    function f() {
        var password = [[${password}]];
        console.log(password);
        var opassword = document.getElementById("opassword").value;
        if (opassword == password){
            document.getElementById("ts1").innerHTML="<font color='green'>密码正确</font>";
            document.getElementById("btn").disabled = false;

        }else {
            document.getElementById("ts1").innerHTML="<font color='red'>密码错误</font>";
            document.getElementById("btn").disabled = true;
        }
    }
    function pw() {
        var pw = document.getElementById("npassword").value;
        if (pw.length<6) {
            document.getElementById("ts3").innerHTML="<font color='red'>密码不能小于6位</font>";
            document.getElementById("btn").disabled = true;
        }
    }
    function validate() {
        var npassword = document.getElementById("npassword").value;
        var qrpassword = document.getElementById("qrpassword").value;
        if (npassword == qrpassword){
            document.getElementById("ts2").innerHTML="<font color='green'>两次密码相同</font>";
            document.getElementById("btn").disabled = false;
        }else {
            document.getElementById("ts2").innerHTML="<font color='red'>两次密码不相同</font>";
            document.getElementById("btn").disabled = true;
        }

    }

</script>
</html>